<template>
		<view>
			
			<van-popup :show="areaPickerVisible" position="bottom"  @close="areaPickerVisible=false">
		       <view class="header">
		           <!-- <view class="uni-title">日期：{{year}}年{{month}}月{{day}}日</view> -->
				   <!-- <div>不展示在我的主页<switch :checked="checked"  color="pink" @change="changeSwitch"/></div> -->
				   <div class="btn-confirm" @click="areaPickerVisible=false">取消</div>
				   <div class="btn-confirm" @click="sendArea">确认</div>
		       </view>
		       <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="pickerValue" @change="bindChange" style="height: 40vh;">
		           <picker-view-column>
		               <view class="item" v-for="(item,index) in provinces" :key="index">{{item.name}}</view>
		           </picker-view-column>
		           <picker-view-column>
		               <view class="item" v-for="(item,index) in citys" :key="index">{{item.name}}</view>
		           </picker-view-column>
		       </picker-view>
			   </van-popup>
		   </view>
</template>

<script>
	import PCCODE from'./pc-code.json'
	export default {
		data() {
			return {
				PCCODE:PCCODE,
				areaPickerVisible:false,//显示弹窗
				checked: true,//switch的选中状态
				citys:[],
				city:'',//选中的城市
				province:'',//选中的省
			    pickerValue: [9999, 444],
			    visible: true,
			    indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
				
			}
		},
		computed:{
			provinces(){
				//省的数组
				return this.PCCODE.map(item=>{
					return {name:item.name,code:item.code}
				})
			},
		},
		watch:{
			pickerValue(nval,val){
				//picker的下标
				if(nval[0]!=val[0]){
					
					this.$set(this.pickerValue,1,0)
					let index=this.pickerValue[0];
					
					this.citys=this.PCCODE[index].children;
				}
			},
			areaPickerVisible(nval){
				if(!nval){
					this.$parent.$data.showPopoupFlag=false;
					console.log(this.$parent.$data.showPopoupFlag)
				}
			}
		},
		methods: {
			bindChange: function (e) {
			    const val = e.detail.value;
				this.pickerValue=val;
			},
			changeSwitch(e){
				//改变switch
				this.checked=e.detail.value;
			},
			sendArea(){
				//告知父组件
				
				this.province=this.provinces[this.pickerValue[0]];
				this.city=this.citys[this.pickerValue[1]]
				let data={
					province:this.province,
					city:this.city,
					area:'',
					showFlag:this.checked,
				}
				this.$emit('getArea',data);
				this.areaPickerVisible=false;
			},
			initCity(){
				//初始为第一个省的城市
				this.pickerValue=[0,0]
			},
			toggleVisible(){
				this.areaPickerVisible=!this.areaPickerVisible;
				
			}
		},
		mounted(){
			this.initCity()
		}
	}
</script>

<style scoped lang="scss">
	.header{
		margin:20rpx 30rpx 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btn-confirm{
			color: green;
		}
	}
	.item{
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	
</style>
